<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <!-- 头部组件 -->
        <div class="btn-text">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            icon="el-icon-edit"
            type="success"
            size="small"
            @click="
              $router.push({
                path: 'new',
                query: {
                  text: '基础'
                }
              })
            "
            >新增试题</el-button
          >
        </div>
        <!-- 选项区域 -->
        <el-form label-width="80px" ref="questionForm" :model="searchForm">
          <el-row :gutter="20">
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="searchForm.subjectID" placeholder="请选择">
                  <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="searchForm.catalogID" placeholder="请选择">
                  <el-option v-for="(item, index) in directorys" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="searchForm.tags" placeholder="请选择">
                  <el-option v-for="(item, index) in labels" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字输入 -->
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model.trim="searchForm.keyword" placeholder="根据题干搜索"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="searchForm.questionType" placeholder="请选择">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简答" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="searchForm.difficulty" placeholder="请选择">
                  <el-option v-for="(item, index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="searchForm.direction" placeholder="请选择">
                  <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="searchForm.creatorID" placeholder="请选择">
                  <el-option v-for="(item, index) in enterings" :key="index" :label="item.username" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model.trim="searchForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model.trim="searchForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <!-- 城市 -->
            <el-col :span="6">
              <el-form-item label="城市" prop="province">
                <!-- 城市 -->
                <el-select v-model="searchForm.province" placeholder="请选择" style="width: 42%">
                  <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <!-- 地区 -->
                <el-select v-model="searchForm.city" placeholder="请选择" style="width: 42%">
                  <el-option v-for="(item, index) in regions" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 取消按钮删除 -->
            <el-col :span="6">
              <el-form-item class="btn">
                <el-button size="small" @click="deleteResetFields">取消</el-button>
                <el-button type="primary" size="small" @click="searchBasicsQuestion">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示信息 -->
        <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"></el-alert>
        <!-- 表格列表 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px; font-size: 14px">
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科" width="100px"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="150px"></el-table-column>
          <el-table-column label="题型" width="70px">
            <template slot-scope="scope">
              <span>{{ scope.row.questionType === '1' ? '单选' : scope.row.questionType === '2' ? '多选' : '简答' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty === '1' ? '简单' : scope.row.difficulty === '2' ? '一般' : '困难' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="100px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 预览操作 -->
              <el-button type="primary" icon="el-icon-view" circle plain @click="editItem(scope.row)"></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="
                  $router.push({
                    path: 'new',
                    query: {
                      id: scope.row.id,
                      text: '基础'
                    }
                  })
                "
              ></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain @click="removeItem(scope.row)"></el-button>
              <el-button type="warning" icon="el-icon-check" circle plain @click="addChoice(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginations">
          <!-- 分页功能 -->
          <el-pagination
            style="margin-top: 20px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="searchForm.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
      <!-- 弹出框 -->
      <div class="container">
        <!-- 编辑对话框 -->
        <el-dialog title="题目预览" :visible.sync="editDialogVisible">
          <questions-preview :questionID="data" v-if="editDialogVisible" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false" type="primary">关闭</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { simple as list } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/hmmm/directorys'
import { simple as simpled } from '@/api/hmmm/tags'
import { simple as usersimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { list as lists, remove, choiceAdd } from '@/api/hmmm/questions'
import { difficulty, subjectID, direction } from '@/api/hmmm/constants'
import questionsPreview from '../components/questions-preview'
export default {
  name: 'AppContainer',
  data() {
    return {
      searchForm: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      options: [],
      // 二级目录数据
      directorys: [],
      // 标签数据
      labels: [],
      // 试题类型
      subjectID,
      // 难度
      difficulty,
      // 方向列表数据
      direction,
      // 录入人
      enterings: [],
      // 城市数据
      citys: [],
      regions: [],
      tableData: [],
      // 一共有多少条数据
      total: null,
      editDialogVisible: false,
      // 预览数据
      data: {}
    }
  },
  components: {
    questionsPreview
  },
  created() {
    // 获取组件的学科
    this.locaFoundation()
    this.locaEntering()
    const ret = provinces()
    this.citys = ret
    this.tableDataList()
  },
  methods: {
    // 获取学科的列表数据
    async locaFoundation() {
      try {
        const { data } = await list()
        this.options = data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取指定二级目录数据
    async getDirectory() {
      try {
        const { data } = await simples({
          subjectID: parseInt(this.searchForm.subjectID)
        })
        this.directorys = data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取标签的列表
    async getlabel() {
      try {
        const { data } = await simpled({
          subjectID: this.searchForm.subjectID
        })
        this.labels = data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取录入人
    async locaEntering() {
      try {
        const { data } = await usersimple()
        this.enterings = data
      } catch (err) {
        console.log(err)
      }
    },
    // 清除输入所有内容
    deleteResetFields() {
      this.$refs.questionForm.resetFields()
      this.tableDataList()
    },
    // 获取表格列表
    async tableDataList() {
      try {
        const { data } = await lists(this.searchForm)
        console.log(data)
        this.total = data.counts
        this.tableData = data.items
      } catch (err) {
        console.log(err)
      }
    },
    // 每页条数
    handleSizeChange(pagesize) {
      this.searchForm.pagesize = pagesize
      this.tableDataList()
    },
    // 页码数
    handleCurrentChange(page) {
      this.searchForm.page = page
      this.tableDataList()
    },
    // 搜索
    searchBasicsQuestion() {
      this.tableDataList()
    },
    // 预览项操作
    editItem(data) {
      console.log('edititem.....')
      console.log(data)
      console.log('edititem.....')
      this.data = data.id
      this.editDialogVisible = true
    },
    // 删除项
    async removeItem(res) {
      const ret = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (ret !== 'confirm') {
        return this.$message.info('取消删除')
      }
      // console.log(123)
      const { data } = await remove(res)
      console.log(data)
      this.$message.success('删除成功')
      this.tableDataList()
    },
    async addChoice(id) {
      const ret = await this.$confirm('此操作将加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).catch(err => err)
      if (ret !== 'confirm') {
        return this.$message.info('取消加入')
      }
      const res = await choiceAdd({
        id: id,
        choiceState: 1
      })
      console.log(res)
      this.tableDataList()
      this.$message.success('加入精选题库成功')
    }
  },
  watch: {
    'searchForm.subjectID': function() {
      this.getDirectory()
      this.getlabel()
    },
    'searchForm.province': function() {
      const res = citys(this.searchForm.province)
      this.regions = res
    }
  }
}
</script>

<style scoped lang="less">
.app-container {
  padding: 5px 10px;
  .btn-text {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: #ffc0cb;
    }
  }
  .col-ke {
    display: flex;
  }
  /deep/ .el-pagination__jump {
    margin: 0;
  }
  .paginations {
    display: flex;
    justify-content: flex-end;
  }
  .btn {
    float: right;
  }
}
</style>
